<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>美团商家列表</title>
    <link rel="stylesheet" href="./plugins/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="./styles/index.css">
</head>
<body>
    <div id="app">
        <header class="seller-sort">
            <div>
               
                <i class="fa fa-angle-right" id="cd"></i>
                <ul>
                    <li>
                        综合排序
                        <ul v-show="true">
                                <li>综合排序</li>
                                <li>速度最快</li>
                                <li>评分最高</li>
                                <li>起送价最低</li>
                                <li>配送费最低</li>
                                <li>人气高到低</li>
                                <li>人气低到高</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div>销量最高</div>
            <div>距离最近</div>
            <div>
                筛选
                <i class="fa fa-filter"></i>
            </div>
            
        </header>
  
        <main>
            <!-- 商家数量显示 -->
            <div class="seller-count">共计 {{sellerCounter}} 个商家</div>
            <!-- 商家列表面板 -->
            <div class="seller-panel">
                <seller-list :seller-info="sellerInfo"></seller-list>
            </div>
            <button 
                type="button" 
                class="btn-add-seller"
                @click="panelShow = true"
            >添加商家</button>
        </main>

        <!-- 添加商家信息面板 -->
        <transition name="slide-fade">
            <div class="seller-info-add-panel" v-show="panelShow">
                <form>
                    <div>
                        <label>商家图片</label>
                        <input type="text" placeholder="请上传商家图片URL" v-model="seller.image">
                    </div>
                    <div>
                        <label>商家名称</label>
                        <input type="text" placeholder="请输入商家名称" v-model="seller.name">
                    </div>
                    <div>
                        <label>可否自取</label>
                        <label>
                            是<input name="selfTaking" type="radio" v-model="seller.pickup" :value="true">
                        </label>
                        <label>
                            否<input name="selfTaking" type="radio" v-model="seller.pickup" :value="false">
                        </label>
                    </div>
                    <div>
                        <label>月售量</label>
                        <input type="text" placeholder="请设置月售量" v-model="seller.salesCount">
                    </div>
                    <div>
                        <label>运送时间</label>
                        <input type="text" placeholder="请设置运送耗时" v-model="seller.timeUsed">
                    </div>
                    <div>
                        <label>距离</label>
                        <input type="text" placeholder="请输入商家距离" v-model="seller.distance">
                    </div>
                    <div>
                        <label>起送费</label>
                        <input type="text" placeholder="请输入起送费" v-model="seller.startFee">
                    </div>
                    <div>
                        <label>配送费</label>
                        <input type="text" placeholder="请输入配送费" v-model="seller.transportFee">
                    </div>
                    <div>
                        <textarea v-model="seller.activities"></textarea>
                    </div>
                    <div class="operate-btn">
                        <button 
                            type="button" 
                            class="btn-cancel"
                            @click="closeFormPanel"
                        >取消</button>
                        <button 
                            type="button" 
                            class="btn-confirm"
                            @click="addSeller"
                        >确认</button>
                    </div>
                </form>
            </div>
        </transition>
    </div>

    <script src="./plugins/vue.js"></script>
    <script src="./plugins/axios.min.js"></script>
    <script src="./components/seller-list.js"></script>
    <script src="./scripts/index.js"></script>
</body>
</html>



<ul>
    <li>
        综合排序
        <ul>
                <li>综合排序</li>
                <li>速度最快</li>
                <li>评分最高</li>
                <li>起送价最低</li>
                <li>配送费最低</li>
                <li>人气高到低</li>
                <li>人气低到高</li>
        </ul>
    </li>
</ul>